import React            from 'react';
import {Link } from 'react-router-dom'

// 组件
import PageTitle    from '../../../common/pageTitle';
import TableList    from '../../../common/tableList';
import Pagination   from '../../../common/pagination';
import ListSearch   from './indexListSearch.js';
// util
import _mm          from '../../../util/Mutil.js';
// css
import './index.scss';
// service
import _product     from '../../../service/productService.js'

class ProductList extends React.Component{
  constructor (props) {
  	super(props)
  	this.state = {
      list            : [],
      pageNum         : 1,
      listType        : 'list'
    }
  }
  render () {
    let tableHeads = [
      {name: '商品ID', width: '10%'},
      {name: '商品信息', width: '50%'},
      {name: '价格', width: '10%'},
      {name: '状态', width: '15%'},
      {name: '操作', width: '15%'},
    ];
    let tbody = this.state.list.map((item, index) => {
      return (
        <tr key={index}>
          <td>{item.id}</td>
          <td>
            <p>{item.name}</p>
            <p>{item.subtitle}</p>
          </td>
          <td>￥{item.price}</td>
          <td>
            <p>{item.status == 1 ? '在售' : '已下架'}</p>
            <button className="btn btn-xs btn-warning" 
                onClick={(e) => {this.onSetProductStatus(e, item.id, item.status)}}>{item.status == 1 ? '下架' : '上架'}</button>
          </td>
          <td>
            <Link className="opear" to={ `/product/detail/${item.id}` }>详情</Link>
            <Link className="opear" to={ `/product/save/${item.id}` }>编辑</Link>
          </td>
        </tr>
      )
    })
    return (
      <div>
        <PageTitle title="商品列表">
          <div className="page-header-right">
            <Link to="/product/save" className="btn btn-primary">
              <i className="fa fa-plus"></i>
              <span>添加商品</span>
            </Link>
          </div>
        </PageTitle>
        <ListSearch onSearch={(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)}}/>
        <TableList tableHeads={tableHeads}>
          {tbody}
        </TableList>
        <Pagination current={this.state.pageNum} 
            total={this.state.total} 
            onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
      </div>
    );
  }
  // events
  onPageNumChange (pageNum) {
    this.setState({
      pageNum: pageNum
    }, () => {
      this.loadProductList()
    })
  }
  loadProductList () {
    let listParam = {};
    listParam.listType = this.state.listType;
    listParam.pageNum  = this.state.pageNum;
    if(this.state.listType === 'search'){
      listParam.searchType = this.state.searchType;
      listParam.keyword    = this.state.searchKeyword;
    }
    _product.getProductList(listParam).then(res => {
      this.setState(res);
    }, errMsg => {
      this.setState({
        list : []
      });
      _mm.errorTips(errMsg);
    });
  }
  onSetProductStatus(e, productId, currentStatus){
    let newStatus   = currentStatus == 1 ? 2 : 1,
        confrimTips = currentStatus == 1 
            ? '确定要下架该商品？' : '确定要上架该商品？';
    if(window.confirm(confrimTips)){
      _product.setProductStatus({
        productId: productId,
        status: newStatus
      }).then(res => {
        _mm.successTips(res)
        this.loadProductList()
      }, errMsg => {
        _mm.errorTips(res)
      })
    }
  }
  onSearch(searchType, searchKeyword){
    let listType = searchKeyword === '' ? 'list' : 'search';
    this.setState({
      listType        : listType,
      pageNum         : 1,
      searchType      : searchType,
      searchKeyword   : searchKeyword
    }, () => {
      this.loadProductList();
    });
  }
  // 生命周期
  componentDidMount(){
    this.loadProductList();
  }
}

export default ProductList;